<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		body{background: #aaa;}
			div{position: absolute; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);border:5px solid #999} 
			#div1{top:100px;left:100px;height:300px;background: url(img/1.png) no-repeat;width:400px;z-index: 1;}
			#div2{top:90px;left:260px;height:300px;background: url(img/2.png) no-repeat;width:600px;z-index: 10;}
			#div3{top:100px;left:600px; height:300px;background: url(img/3.png) no-repeat;width:400px;z-index: 2;}
			.one,.two{position: absolute;}
			.one{top:190px;left:300px;z-index: 100;;}
			.two{top:190px;left:800px;z-index: 100;}
		</style>
	</head>
	<body>
		
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		
		<button class="one"><<</button>
		<button class="two">>></button>
		
		<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var div=document.getElementsByTagName("div");
			var button=document.getElementsByTagName("button");
			
			var arr=[];

			for(var i=0;i<div.length;i++){
				arr.push([parseInt(getstyle(div[i],"top")),parseInt(getstyle(div[i],"left")),parseInt(getstyle(div[i],"width")),getstyle(div[i],'zIndex')]);
			}
			
			button[0].onclick=function(){
				arr.push(arr[0]);
				arr.shift();
				for (var i=0;i<div.length;i++) {
					div[i].style.zIndex=arr[i][3];
					startMove(div[i],{top:arr[i][0],left:arr[i][1],width:arr[i][2]})
				}
			}
			
			button[1].onclick=function(){
				arr.unshift(arr[arr.length-1]);
				arr.pop();
				for (var i=0;i<div.length;i++) {
					div[i].style.zIndex=arr[i][3];
					startMove(div[i],{top:arr[i][0],left:arr[i][1],width:arr[i][2]})
				}
			}
			
			function getstyle(obj,attr){
				if(obj.currentStyle){
					return obj.currentStyle[attr];
				}else{
					return getComputedStyle(obj,false)[attr];
				}
			}
			
			
			
			
			
			
		</script>
		
		
		
		
	</body>
</html>
